<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 10px;">题集详情</h2>
     <h2><router-link class="btn btn-sm btn-success" style="width: 15%;" :to="{name: 'T_AddPro', params: {setId:setId}} ">添加题目</router-link></h2>
     
     <table class="table  table-primary  table-striped table-hover" style=" margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">id</th>
                <th scope="col">题集id<br>(setId)</th>
                <th scope="col">题型<br>(proType)</th>
                <th scope="col">题目内容<br>(content)</th>
                <th scope="col">正确的SQL语句<br>(correctSQL)</th>
                <th scope="col">返回结果<br>(result)</th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for=" item in pros" :key="item.id">
                    <th>{{ item.id }}</th>
                    <td>{{ setId }}</td>
                    <td v-if="item.proType == 1">查询类(select)</td>
                    <td v-if="item.proType == 2">添加类(insert)</td>
                    <td v-if="item.proType == 3">修改类(update)</td>
                    <td v-if="item.proType == 4">删除类(delete)</td>
                    <td >{{ item.content }}</td>
                    <td >{{ item.correctSQL }}</td>
                    <td v-if="item.result.split(',').length < 5">{{ item.result }}</td>
                    <td v-else>{{ item.result.split(',').slice(0, 5).join(',') + ',...' }}</td>  
              </tr>
            </tbody>
        </table>

        <div>
        <span aria-label="Page navigation example">
        <ul class="pagination" style="float:left">
            <li class="page-item disabled">
                <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
            </li>
        </ul>

        <ul class="pagination" style="float:right">
            <li class='page-item'>
                <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                <a v-else class="page-link" @click="getPage4P( setId, prePage, pageSize )">上一页</a>
            </li>

            <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                <a  class="page-link" @click="getPage4P(setId, item, pageSize)">{{ item }}</a>
            </li>
            <li class= 'page-item'>
                <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                <a  v-else class="page-link" @click="getPage4P(setId, nextPagepageSize )">下一页</a>  
            </li>
        </ul>
    </span>
        </div>

    </ContentField>
 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import { useRoute } from 'vue-router';
 import {useStore} from 'vuex';
 import {ref} from 'vue';
 import $ from 'jquery';


 export default{
     name: 'setProfile',
     components: {
         NavBar,
         ContentField,
     },
     setup(){
        const store = useStore();
        const route = useRoute();
        let pros = ref([]);

        let PageNum = 1 ;  //当前页数
        let PageSize = 6 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        let setId = route.params.setId;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage4P = (setId, PageNum, PageSize)=> {

        console.log('setId:');
        console.log(setId);
        console.log('PageNum:');
        console.log(PageNum);
        console.log('PageSize:');
        console.log(PageSize);

        $.ajax({  //通过TId获取所有题集
            url: 'http://localhost:8090/sls/queryPro/getPageInfoBySetId/' +setId + '/' + PageNum +'/' + PageSize ,
            type: 'get',
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){

                console.log(resp);

                pros.value = resp.list;  //获取所有题集信息

                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize);

            },
            error(resp){
                console.log(resp);
            }
        });
        }

        getPage4P(setId, PageNum, PageSize);

        return{
            updatePageInfo,
            getPage4P,
            pros,
            setId,
            PageNum,
            PageSize,
            pageNum,
            pageSize,
            totalNum,
            totalPage,
            isFirstPage,
            isLastPage,
            nextPage,
            prePage,

        }
      
     }

 }
 
 </script>
 
 
 
 <style scoped>

 </style>